// 形状绘制工具函数

// 绘制圆形
export const drawCircle = (ctx, x, y, radius, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2 } = options
  
  ctx.beginPath()
  ctx.arc(x, y, radius, 0, 2 * Math.PI)
  
  if (fillStyle) {
    ctx.fillStyle = fillStyle
    ctx.fill()
  }
  
  if (strokeStyle) {
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
}

// 绘制椭圆形
export const drawEllipse = (ctx, x, y, radiusX, radiusY, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2 } = options
  
  ctx.beginPath()
  ctx.ellipse(x, y, radiusX, radiusY, 0, 0, 2 * Math.PI)
  
  if (fillStyle) {
    ctx.fillStyle = fillStyle
    ctx.fill()
  }
  
  if (strokeStyle) {
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
}

// 绘制矩形
export const drawRectangle = (ctx, x, y, width, height, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2 } = options
  
  ctx.beginPath()
  ctx.rect(x, y, width, height)
  
  if (fillStyle) {
    ctx.fillStyle = fillStyle
    ctx.fill()
  }
  
  if (strokeStyle) {
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
}

// 绘制三角形，size表示边长
export const drawTriangle = (ctx, x, y, size, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2 } = options
  
  ctx.beginPath()
  ctx.moveTo(x, y - size / 2)
  ctx.lineTo(x - size / 2, y + size / 2)
  ctx.lineTo(x + size / 2, y + size / 2)
  ctx.closePath()
  
  if (fillStyle) {
    ctx.fillStyle = fillStyle
    ctx.fill()
  }
  
  if (strokeStyle) {
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
}

// 绘制菱形，size表示对角线长度
export const drawDiamond = (ctx, x, y, size, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2 } = options
  
  ctx.beginPath()
  ctx.moveTo(x, y - size / 2)
  ctx.lineTo(x + size / 2, y)
  ctx.lineTo(x, y + size / 2)
  ctx.lineTo(x - size / 2, y)
  ctx.closePath()
  
  if (fillStyle) {
    ctx.fillStyle = fillStyle
    ctx.fill()
  }
  
  if (strokeStyle) {
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
}

// 绘制六边形，size表示边长
export const drawHexagon = (ctx, x, y, size, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2 } = options
  
  ctx.beginPath()
  for (let i = 0; i < 6; i++) {
    const angle = (i * Math.PI) / 3
    const px = x + size * Math.cos(angle)
    const py = y + size * Math.sin(angle)
    if (i === 0) {
      ctx.moveTo(px, py)
    } else {
      ctx.lineTo(px, py)
    }
  }
  ctx.closePath()
  
  if (fillStyle) {
    ctx.fillStyle = fillStyle
    ctx.fill()
  }
  
  if (strokeStyle) {
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
}

// 绘制星形
export const drawStar = (ctx, x, y, outerRadius, innerRadius, points = 5, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2 } = options
  
  ctx.beginPath()
  for (let i = 0; i < points * 2; i++) {
    const angle = (i * Math.PI) / points
    const radius = i % 2 === 0 ? outerRadius : innerRadius
    const px = x + radius * Math.cos(angle)
    const py = y + radius * Math.sin(angle)
    if (i === 0) {
      ctx.moveTo(px, py)
    } else {
      ctx.lineTo(px, py)
    }
  }
  ctx.closePath()
  
  if (fillStyle) {
    ctx.fillStyle = fillStyle
    ctx.fill()
  }
  
  if (strokeStyle) {
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
}

// 绘制心形
export const drawHeart = (ctx, x, y, size, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2 } = options
  
  ctx.beginPath()
  ctx.moveTo(x, y + size / 4)
  ctx.bezierCurveTo(
    x, y, 
    x - size / 2, y, 
    x - size / 2, y + size / 4
  )
  ctx.bezierCurveTo(
    x - size / 2, y + size / 2, 
    x, y + size * 3 / 4, 
    x, y + size * 3 / 4
  )
  ctx.bezierCurveTo(
    x, y + size / 2, 
    x + size / 2, y + size / 2, 
    x + size / 2, y + size / 4
  )
  ctx.bezierCurveTo(
    x + size / 2, y, 
    x, y, 
    x, y + size / 4
  )
  
  if (fillStyle) {
    ctx.fillStyle = fillStyle
    ctx.fill()
  }
  
  if (strokeStyle) {
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
}

// 绘制流程图处理框
export const drawProcess = (ctx, x, y, width, height, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2, showConnectors = true } = options
  
  // 绘制矩形
  drawRectangle(ctx, x, y, width, height, { fillStyle, strokeStyle, lineWidth })
  
  // 绘制连接点
  if (showConnectors) {
    const connectorRadius = 3
    const connectorColor = '#007bff'
    
    // 上中
    drawCircle(ctx, x + width / 2, y, connectorRadius, { fillStyle: connectorColor })
    // 下中
    drawCircle(ctx, x + width / 2, y + height, connectorRadius, { fillStyle: connectorColor })
    // 左中
    drawCircle(ctx, x, y + height / 2, connectorRadius, { fillStyle: connectorColor })
    // 右中
    drawCircle(ctx, x + width, y + height / 2, connectorRadius, { fillStyle: connectorColor })
  }
}

// 绘制流程图判断框（菱形）
export const drawDecision = (ctx, x, y, size, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2, showConnectors = true } = options
  
  // 绘制菱形
  drawDiamond(ctx, x, y, size, { fillStyle, strokeStyle, lineWidth })
  
  // 绘制连接点
  if (showConnectors) {
    const connectorRadius = 3
    const connectorColor = '#007bff'
    
    // 上中
    drawCircle(ctx, x, y - size / 2, connectorRadius, { fillStyle: connectorColor })
    // 下中
    drawCircle(ctx, x, y + size / 2, connectorRadius, { fillStyle: connectorColor })
    // 左中
    drawCircle(ctx, x - size / 2, y, connectorRadius, { fillStyle: connectorColor })
    // 右中
    drawCircle(ctx, x + size / 2, y, connectorRadius, { fillStyle: connectorColor })
  }
}

// 绘制流程图开始/结束框（椭圆）
export const drawStartEnd = (ctx, x, y, width, height, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2, showConnectors = true } = options
  
  // 绘制椭圆
  drawEllipse(ctx, x + width / 2, y + height / 2, width / 2, height / 2, { fillStyle, strokeStyle, lineWidth })
  
  // 绘制连接点
  if (showConnectors) {
    const connectorRadius = 3
    const connectorColor = '#007bff'
    
    // 上中
    drawCircle(ctx, x + width / 2, y, connectorRadius, { fillStyle: connectorColor })
    // 下中
    drawCircle(ctx, x + width / 2, y + height, connectorRadius, { fillStyle: connectorColor })
    // 左中
    drawCircle(ctx, x, y + height / 2, connectorRadius, { fillStyle: connectorColor })
    // 右中
    drawCircle(ctx, x + width, y + height / 2, connectorRadius, { fillStyle: connectorColor })
  }
}

// 绘制流程图输入/输出框（平行四边形）
export const drawInputOutput = (ctx, x, y, width, height, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2, showConnectors = true } = options
  const offset = width * 0.2
  
  ctx.beginPath()
  ctx.moveTo(x + offset, y)
  ctx.lineTo(x + width, y)
  ctx.lineTo(x + width - offset, y + height)
  ctx.lineTo(x, y + height)
  ctx.closePath()
  
  if (fillStyle) {
    ctx.fillStyle = fillStyle
    ctx.fill()
  }
  
  if (strokeStyle) {
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
  
  // 绘制连接点
  if (showConnectors) {
    const connectorRadius = 3
    const connectorColor = '#007bff'
    
    // 上中
    drawCircle(ctx, x + width / 2, y, connectorRadius, { fillStyle: connectorColor })
    // 下中
    drawCircle(ctx, x + width / 2, y + height, connectorRadius, { fillStyle: connectorColor })
    // 左中
    drawCircle(ctx, x + offset / 2, y + height / 2, connectorRadius, { fillStyle: connectorColor })
    // 右中
    drawCircle(ctx, x + width - offset / 2, y + height / 2, connectorRadius, { fillStyle: connectorColor })
  }
}

// 绘制流程图数据框（圆柱形）
export const drawData = (ctx, x, y, width, height, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2, showConnectors = true } = options
  
  // 绘制椭圆顶部
  drawEllipse(ctx, x + width / 2, y, width / 2, height * 0.1, { fillStyle, strokeStyle, lineWidth })
  
  // 绘制椭圆底部
  drawEllipse(ctx, x + width / 2, y + height, width / 2, height * 0.1, { fillStyle, strokeStyle, lineWidth })
  
  // 绘制左右边线
  ctx.beginPath()
  ctx.moveTo(x, y)
  ctx.lineTo(x, y + height)
  ctx.moveTo(x + width, y)
  ctx.lineTo(x + width, y + height)
  ctx.strokeStyle = strokeStyle
  ctx.lineWidth = lineWidth
  ctx.stroke()
  
  // 绘制连接点
  if (showConnectors) {
    const connectorRadius = 3
    const connectorColor = '#007bff'
    
    // 上中
    drawCircle(ctx, x + width / 2, y - height * 0.1, connectorRadius, { fillStyle: connectorColor })
    // 下中
    drawCircle(ctx, x + width / 2, y + height + height * 0.1, connectorRadius, { fillStyle: connectorColor })
    // 左中
    drawCircle(ctx, x, y + height / 2, connectorRadius, { fillStyle: connectorColor })
    // 右中
    drawCircle(ctx, x + width, y + height / 2, connectorRadius, { fillStyle: connectorColor })
  }
}

// 绘制流程图文档框
export const drawDocument = (ctx, x, y, width, height, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2, showConnectors = true } = options
  const foldWidth = width * 0.2
  
  ctx.beginPath()
  ctx.moveTo(x, y)
  ctx.lineTo(x + width - foldWidth, y)
  ctx.lineTo(x + width, y + foldWidth)
  ctx.lineTo(x + width, y + height)
  ctx.lineTo(x, y + height)
  ctx.closePath()
  
  if (fillStyle) {
    ctx.fillStyle = fillStyle
    ctx.fill()
  }
  
  if (strokeStyle) {
    ctx.strokeStyle = strokeStyle
    ctx.lineWidth = lineWidth
    ctx.stroke()
  }
  
  // 绘制连接点
  if (showConnectors) {
    const connectorRadius = 3
    const connectorColor = '#007bff'
    
    // 上中
    drawCircle(ctx, x + width / 2, y, connectorRadius, { fillStyle: connectorColor })
    // 下中
    drawCircle(ctx, x + width / 2, y + height, connectorRadius, { fillStyle: connectorColor })
    // 左中
    drawCircle(ctx, x, y + height / 2, connectorRadius, { fillStyle: connectorColor })
    // 右中
    drawCircle(ctx, x + width, y + height / 2, connectorRadius, { fillStyle: connectorColor })
  }
}

// 绘制流程图子流程框
export const drawSubprocess = (ctx, x, y, width, height, options = {}) => {
  const { fillStyle, strokeStyle, lineWidth = 2, showConnectors = true } = options
  
  // 绘制矩形
  drawRectangle(ctx, x, y, width, height, { fillStyle, strokeStyle, lineWidth })
  
  // 绘制内部横线
  ctx.beginPath()
  ctx.moveTo(x, y + height * 0.3)
  ctx.lineTo(x + width, y + height * 0.3)
  ctx.strokeStyle = strokeStyle
  ctx.lineWidth = lineWidth
  ctx.stroke()
  
  // 绘制连接点
  if (showConnectors) {
    const connectorRadius = 3
    const connectorColor = '#007bff'
    
    // 上中
    drawCircle(ctx, x + width / 2, y, connectorRadius, { fillStyle: connectorColor })
    // 下中
    drawCircle(ctx, x + width / 2, y + height, connectorRadius, { fillStyle: connectorColor })
    // 左中
    drawCircle(ctx, x, y + height / 2, connectorRadius, { fillStyle: connectorColor })
    // 右中
    drawCircle(ctx, x + width, y + height / 2, connectorRadius, { fillStyle: connectorColor })
  }
}

// 根据形状类型绘制形状
export const drawShape = (ctx, shapeType, x, y, width, height, options = {}) => {
  switch (shapeType) {
    case 'circle':
      drawCircle(ctx, x + width / 2, y + height / 2, Math.min(width, height) / 2, options)
      break
    case 'ellipse':
      drawEllipse(ctx, x + width / 2, y + height / 2, width / 2, height / 2, options)
      break
    case 'rectangle':
      drawRectangle(ctx, x, y, width, height, options)
      break
    case 'triangle':
      drawTriangle(ctx, x + width / 2, y + height / 2, Math.min(width, height), options)
      break
    case 'diamond':
      drawDiamond(ctx, x + width / 2, y + height / 2, Math.min(width, height), options)
      break
    case 'hexagon':
      drawHexagon(ctx, x + width / 2, y + height / 2, Math.min(width, height) / 2, options)
      break
    case 'star':
      drawStar(ctx, x + width / 2, y + height / 2, Math.min(width, height) / 3, Math.min(width, height) / 6, 5, options)
      break
    case 'heart':
      drawHeart(ctx, x + width / 2, y + height / 2, Math.min(width, height), options)
      break
    case 'process':
      drawProcess(ctx, x, y, width, height, options)
      break
    case 'decision':
      drawDecision(ctx, x + width / 2, y + height / 2, Math.min(width, height), options)
      break
    case 'start':
      drawStartEnd(ctx, x, y, width, height, options)
      break
    case 'input':
      drawInputOutput(ctx, x, y, width, height, options)
      break
    case 'data':
      drawData(ctx, x, y, width, height, options)
      break
    case 'document':
      drawDocument(ctx, x, y, width, height, options)
      break
    case 'database':
      drawData(ctx, x, y, width, height, options)
      break
    case 'subprocess':
      drawSubprocess(ctx, x, y, width, height, options)
      break
    default:
      console.warn(`Unknown shape type: ${shapeType}`)
  }
}